<template>
  <el-form :model="searchInfo" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
    <div v-for="(item, index) in searchData" :key="index">
      <el-form-item v-if="item.type == 'input'" :label="item.label">
        <el-input v-model:value="searchInfo[item.value]" />
      </el-form-item>
      <el-form-item v-if="item.type == 'select'" :label="item.label">
        <el-select
          v-model:value="searchInfo[item.value]"
          :placeholder="item.placeholder"
          :options="item.menu"
          style="width: 120px"
        >
          <el-option :value="item.menu.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="item.type === 'picker'" :label="item.label">
        <el-date-picker
          v-model:value="searchInfo[item.value]"
          show-time
          type="date"
          :placeholder="item.placeholder"
          style="width: 100%"
        />
      </el-form-item>
    </div>
    <el-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <el-button type="primary" @click="onSubmit">搜索</el-button>
    </el-form-item>
    <el-form-item>
      <el-button style="margin-left: 10px">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
import Moment from 'moment'
import { defineComponent, reactive, toRaw } from 'vue'
export default defineComponent({
  name: 'search',
  props: {
    searchInfo: {
      default: {},
      type: Object
    },
    searchData: {
      default: [],
      type: Array
    }
  },
  setup(props: any, ctx) {
    const searchInfo: any = reactive(props.searchInfo)
    const searchData = reactive(props.searchData)
    const onSubmit = () => {
      console.log('submit!', toRaw(searchInfo))
      ctx.emit('submit-data', toRaw(searchInfo))
    }
    console.log(searchInfo)
    console.log(searchData)
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      searchInfo,
      onSubmit,
      searchData
    }
  }
})
</script>
